<%--
	* Copyright: coolmoon Software Design Co,.ltd
	* Created on 2013-8-13-下午04:52:27
	* @author lenovo
	* JSP页面功能描述: 
	
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>添加租房信息</title>
	<link href="${pageContext.request.contextPath}/stylesheets/pub.css" rel="stylesheet" type="text/css"/>
	<link href="${pageContext.request.contextPath}/stylesheets/imageUploader.css" rel="stylesheet" type="text/css"/>
	<link href="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/thems/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.ui.core.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.ui.position.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.ui.menu.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.ui.autocomplete.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/jquery.swfupload.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/swfupload.js"></script>
	<style type="text/css">
		.swfObj{
			position: relative;
			top : 0px;
			left: -61px;
		}
	</style>
	<!-- script代码 -->
	<script type="text/javascript">
	<!--
		var imageNames = "";//上传图片名称
		var imageCount = 0;//上传图片计数
		$(document).ready(function(){
			$("#id_district_id").bind("change",function(){
				var value = $("#id_district_id").val();
				getBusinessArea(value);
			});
			showDropdownDiv("fang_xing", "zhuangxiu", "chaoxiang", "pay_type");
			//设置默认值
			setDefault();
			setXiaoqu();
			swfuploadInit();
		});
		//显示、隐藏自定义下拉列表及点击下拉列表赋值
		function showDropdownDiv()
		{
			for(var i=0; i<arguments.length; i++)
			{
				var parentObj = $("input[name="+arguments[i]+"]").parent();
				parentObj.bind({
					"mouseover":function()
					{
						$(this).find("div").css("display", "block");
					},
					"mouseout":function(){
						$(this).find("div").css("display", "none");
					}
				});
				parentObj.find("div a").bind("click",{arg:arguments[i]}, function(event){
					event = event || window.event;
					var obj = $(this).parent().parent();
					obj.find("input[name=_unused]").val($(this).text());
					obj.find("input[name="+event.data.arg+"]").val($(this).attr("data"));
					obj.find("div").css("display", "none");
				});
			}
		}
		//获取商圈数据
		function getBusinessArea(id, defaultId)
		{
			$.ajax({
				type: "POST",
				url: "${pageContext.request.contextPath}/houseInfoRentPub/getBusinessArea.html",
				data: {id:id},
				dataType:"text",
				success: function(msg){
					msg = "<option value=\"\">请选择</option>" + msg;
					$("#id_street_id").html(msg);
					if(typeof(defaultId)!="undefined")
					{
						$("#id_street_id").val(defaultId);
					}
				},
				error:function(request, textStatus, errorThrown){
					window.location = window.location;
				}
			});
		}
		function checkAll(name, o){
	        if(o.value == '全选'){
	            var ary = document.getElementsByName(name);
	            for(var i=0; i<ary.length; i++) {
	                ary[i].checked = true;
	            }
	        }
	        else{ // 全不选
	            var ary = document.getElementsByName(name);
	            for(var i=0; i<ary.length; i++) {
	                ary[i].checked = false;
	            }
	        }
	        o.value = o.value=='全选'?'全不选':'全选';
	    }
		//设置小区自动提示下拉列表
		function setXiaoqu()
		{
    		$("#id_xiaoqu").autocomplete({
    			minLength: 0,
    			source: "${pageContext.request.contextPath}/houseInfoRentPub/getXiaoquData.html?cityId="+cityId,
    			select: function(event, ui) {
    				$("#id_xiaoqu").val(ui.item.community_name_);
    				$("#id_district_id").val(ui.item.pid_);
    				getBusinessArea(ui.item.pid_, ui.item.id_);
    				$("#id_xiaoqu_address").val(ui.item.community_addr_);
    				return false;
    			}
    		})
    		.data( "autocomplete" )._renderItem = function( ul, item ) {
    			return $( "<li>" )
    				.data( "item.autocomplete", item )
    				.append( "<a>"+ item.community_name_ + "    " + item.pname_ + "-" + item.name_ + "</a>" )
    				.appendTo( ul );
    		};
		}
		//设置默认值
		function setDefault()
		{
			var default_val = '吸引人的标题可让更多的人看您的信息哦';
		    $('#title').val( default_val).attr('style', 'color: #bbb')
		    .focus(function(){
		        var title = $.trim($(this).val());
		        if(title == '' || title == default_val){
		            $(this).val('').attr('style', 'color: black');
		        }
		    })
		    .blur(function(){
		        var title = $.trim($(this).val());
		        if(title == ''){
		            $(this).val(default_val).attr('style', 'color: #bbb');
		            $('#tip_span_title').html('<span class="validatorMsg validatorError">忘记填写标题啦</span>');
		        }
		        else
		        {
		        	$('#tip_span_title').html("");
		        }
		    });
		    var price_default = '面议';
		    $('#price').val(price_default).attr('style', 'color: #bbb');
		    $('#price').focus(function(){
		        var price = $.trim($(this).val());
		        if(price == '' || price == price_default){
		            $(this).val('').attr('style', 'color: black');
		        }
		    });
		    $('#price').blur(function(){
		        var price = $.trim($(this).val());
		        if(price == ''){
		            $(this).val(price_default).attr('style', 'color: #bbb');
		        }
		    });
		    var wei_default = '1';
		    $('input[name="huxing_wei"]').val(wei_default);
		    $('input[name="huxing_wei"]').focus(function(){
		       var wei = $.trim($(this).val());
		       if(wei == '' || wei == wei_default){
		           $(this).val('').attr('style', 'color: black');
		       }
		   	});
		    $('input[name="huxing_wei"]').blur(function(){
		        var wei = $.trim($(this).val());
		        if(wei == ''){
		            $(this).val(wei_default);
		        }
		    });
		    var describe_default = '房屋详细信息，小区情况，周边配套，交通情况，对租客的要求，入住时间';
		    $('#id_description').val(describe_default).attr('style','color:#bbb');
		    $('#id_description').focus(function(){
		        var describe = $.trim($(this).val());
		        if (describe == '' || describe == describe_default) {
		            $(this).val('').attr('style','color:black');
		        }
		    });
		}
		//多文件上传控件初始化
		function swfuploadInit()
		{
			jQuery.fn.bindAll = function(options) {
				var $this = this;
				jQuery.each(options, function(key, val){
					$this.bind(key, val);
				});
				return this;
			};
			$(function(){
				
				var listeners = {
					swfuploadLoaded: function(event){
						//$('.log', this).append('<li>Loaded</li>');
					},
					fileQueued: function(event, file){
						//$('.log', this).append('<li>File queued - '+file.name+'</li>');
						// start the upload once it is queued
						$(this).swfupload('startUpload');
					},
					fileQueueError: function(event, file, errorCode, message){
						//$('.log', this).append('<li>File queue error - '+message+'</li>');
					},
					fileDialogStart: function(event){
						//$('.log', this).append('<li>File dialog start</li>');
					},
					fileDialogComplete: function(event, numFilesSelected, numFilesQueued){
						//$('.log', this).append('<li>File dialog complete</li>');
					},
					uploadStart: function(event, file){
						//$('.log', this).append('<li>Upload start - '+file.name+'</li>');
						// don't start the upload if this queue is disabled
					},
					uploadProgress: function(event, file, bytesLoaded){
						//$('.log', this).append('<li>Upload progress - '+bytesLoaded+'</li>');
					},
					uploadSuccess: function(event, file, serverData){
						var jsonData = eval("("+serverData+")");
						imageNames = imageNames == ""?jsonData.newFileName:(imageNames+","+jsonData.newFileName);
						$("#input_upload_image").val(imageNames);
						var userId = '<security:authentication property="principal.userID" />';
						var imgStr = '<li>'
					            	+'<div class="ui-uploader-content" style="background-position: 28.5px 11px; width: 90px; height: 75px;">'
					            	+'<span class="ui-uploader-progress" style="line-height: 55px; display: none;">100%</span>'
					            	+'<div class="ui-uploader-error" style="text-align: center;"></div>'
					            	+'<img style="width: 90px; height: 75px;" src="${pageContext.request.contextPath}/upload/houseImage/'+userId+'/'+jsonData.newFileName+'"/>'
					            	+'</div>'
					            	+'<a class="ui-uploader-close" href="###" onclick="deleteImg(this,\''+userId+'\',\''+jsonData.newFileName+'\')">&nbsp;&nbsp;&nbsp;</a>'
					            	+'</li>';
						$(".ui-uploader-thumbImages").append(imgStr);
						
						imageCount ++;
						//$('.log', this).append('<li>Upload success - '+file.name+'</li>');
					},
					uploadComplete: function(event, file){
						//$('.log', this).append('<li>Upload complete - '+file.name+'</li>');
						// upload has completed, lets try the next one in the queue
						if(imageCount < 8)
						{
							$(this).swfupload('startUpload');
						}
						else
						{
							alert("最多能上传8张");
						}
					},
					uploadError: function(event, file, errorCode, message){
						//$('.log', this).append('<li>Upload error - '+message+'</li>');
						alert("上传失败，请重试");
					}
				};

				$('.swfupload-control').bindAll(listeners);
			});
					
			$(function(){
				$('.swfupload-control').each(function(){
					$(this).swfupload({
						upload_url: "${pageContext.request.contextPath}/houseInfoRentPub/uploadFiles.html",
						file_size_limit : "10 MB",
						file_types : "*.*",
						file_types_description : "All Files",
						file_upload_limit : "0",
						flash_url : "${pageContext.request.contextPath}/scripts/jquery-ui-1.9.2/swfupload.swf",
						button_image_url : '',
						button_width : 61,
						button_height : 25,
						button_placeholder : $('#swfObjDiv', this)[0],
						button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
						button_cursor : SWFUpload.CURSOR.HAND,
						file_post_name : 'myUpload',
						debug: false
					});
					var swfObjId = $(this).data('__swfu').movieName;
					document.getElementById(swfObjId).className = "swfObj";
				});
			});	
		}
		//删除上传图片
		function deleteImg(thisObj,userId, fileName)
		{
			$.ajax({
				type: "POST",
				url: "${pageContext.request.contextPath}/houseInfoRentPub/deleteImage.html",
				data: {userId:userId,fileName:fileName},
				dataType:"text",
				success: function(msg){
					var data = eval("("+msg+")");
					if(data.success)
					{
						$(thisObj).parent().remove();
						imageCount--;
					}
					else
					{
						alert("删除失败，请重试！");
					}
				},
				error:function(request, textStatus, errorThrown){
					alert("删除失败，请重试！");
				}
			});
		}
	//-->
	</script>
</head>
<body>

<%--正文开始--%>
	<div class="title">填写详情</div>
	<div class="add-detail">
		<form method="post" id="id_post_form"  enctype="multipart/form-data" action="${pageContext.request.contextPath}/houseInfoRentPub/addHouseRent.html">
			<input type="hidden" name="Constant_Duplicate_Submission_KEY_" value="${Constant_Duplicate_Submission_KEY_}"/>
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th><span class="star">*</span>出租方式</th>
					<td width="846">
				        <input class="input-radio rentToShare" name="rent_mode" type="radio" value='1' checked="checked"/><label>整租</label>
				        <input class="input-radio shareToRent" name="rent_mode" type="radio" value='2'/><label>合租</label>
				        <span id="tip_span_rent_mode"></span>
					</td>
				</tr>
				<tr>
					<th><span class="star">*</span>小区名称</th>
					<td width="846">
					     <div style="position:relative;" id="auto_container">
				         	<input id="id_xiaoqu" type="text" class="input-style" value="" name="xiaoqu" xiaoqu_id="" size="66" maxlength="20" domain="sh" avg_price="" xiaoqu=""/>
				         </div>
					</td>
				</tr>
				<tr>
					<th><span class="star">*</span>小区地址</th>
					<td width="846">
						<select name="district_id" id="id_district_id" class="select-style"  >
							<option value="" selected="selected" >请选择</option>
							${districtStr}
						</select>&nbsp;
						<select name="street_id" id="id_street_id" class="select-style" street_id="" style="width:80px;">
							<option value="">请选择</option>
					   	</select>
					   	<input type="text" class="input-style input-address" value="" id="id_xiaoqu_address" name="xiaoqu_address" size="35" maxlength="30"/>
						<span id="tip_span_xiaoqu_address"></span>
				     </td>
				</tr>
				<tr id="mark_poi" style="display:none;">
					<th><span class="star"></span>地图标记</th>
					<td  class="map_btntd" width="846">
						<a class="mapbtn btn-style" id="handleButtonId" href="#">在地图上标记位置</a>
						<span id="map_tip"></span>
						<input id="latlng" type="hidden" name="latlng" data-old-value="" value="" />
					</td>
				</tr>
				<tr>
				    <th><span class="star">*</span>户型</th>
				    <td width="846">
						<input type="text" value=""  name="huxing_shi" size="10" class="input-style huxing" maxlength="2"/> 室
						<input type="text" value=""  name="huxing_ting" size="10" class="input-style huxing" maxlength="2"/> 厅
						<input type="text" value=""  name="huxing_wei" size="10" class="input-style huxing" maxlength="2"/> 卫
						<span id="tip_span_huxing"></span>
					</td>
				</tr>
				<tr>
					<th><span class="star">*</span>面积</th>
					<td width="846">
				    	<input type="text" value="" name="area" size="10" id="id_area" class="input-style" maxlength="5"/> 平米
						<span id="tip_span_area"></span>
					</td>
				</tr>
				<tr>
					<th><span class="star">*</span>楼层</th>
					<td width="846"> 
					    第&nbsp;<input type="text" size="10" value=""  name="ceng" maxlength="2" class="input-style huxing" /> 层，共
					     <input type="text" size="10" value=""  name="ceng_total" maxlength="2" class="input-style huxing" /> 层<span id="tip_span_ceng"></span>
					</td>
				</tr>
				
				<tr>
					<th><span class="star">*</span>房屋情况</th>
					<td width="846">
						<div class="sel-box">
							<input type="text" name="_unused" value="普通住宅"/>
							<input type="hidden" name="fang_xing" value="1"/>
							<div>
								${residenceTypeStr}
							</div>
						</div>
						<div class="sel-box">
							<input type="text" name="_unused" value="装修情况"/>
							<input type="hidden" name="zhuangxiu" value=""/>
							<div>
								${adornTypeStr}
							</div>
						</div>
						<div class="sel-box">
							<input type="text" name="_unused" value="选择朝向"/>
							<input type="hidden" name="chaoxiang" value=""/>
							<div>
								${directionStr}
							</div>
						</div>
				        <span id="tip_span_zhuangxiu"></span>
					</td>
				</tr>
				
				
				<tr>
					<th><span class="star"></span>房屋配置</th>
				    	<td width="846">
							${houseConfigStr}
							<input class="qxbtn" type="button" value="全选" onclick="checkAll('peizhi', this)"/>
						</td>
				</tr>
				<tr>
					<th><span class="star">*</span>租金</th>
					<td class="sel-zujin" width="846">
						<label class='sel-lbl'><input name="price" type="text" id="price" old_price="" is_sure="false"  class="input-style" size="10" maxlength="7" value=""/> 元/月</label>
						<div class="sel-box">
							<input type="text" name="_unused" value="押一付三"/>
							<input type="hidden" name="pay_type" value="03"/>
							<div>
								${rentPayTypeStr}
							</div>
						</div>
						<span id="tip_span_price"></span>
					</td>
				</tr>
				<tr class="self_service_area" style="display:none">
				    <td colspan="2">
				        <div class="dot_line"></div>
				        <input type="hidden"  id="sticky" name="sticky" value="0" />
				    </td>
				</tr>
				
				<tr>
					<th><span class="star">*</span>标题</th>
					<td width="846"> <label for="textfield"></label>
						 <input id="title" type="text" class="input-style" value="" name="title" size="66" maxlength="30"/>
						 <span id="tip_span_title"></span>
				   </td>
				</tr>
				<tr id="title_suggestion" style="display:none">
				    <th></th>
				    <td width="846">示例：西红门 地铁4号线沿线 精装两居室（个人）<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;紧邻地铁 马家堡嘉园二里 精装一居 </td>
				</tr>
				<tr>
					<th valign="top"><span class="star">*</span>房源描述</th>
					<td width="846">
						<table border="0" cellspacing="0" cellpadding="0" class="normal">
							<tr>
							 	<td>
							  		<textarea rows="12" cols="70" name="description" id="id_description"></textarea>
							  	</td>
							  	<td><span id="tip_span_description"></span></td>
							  </tr>
						</table>
					</td>
				</tr>
				<tr>
					<th valign="top"><span class="star"></span><span class="up-img-tit">上传照片</span></th>
				    <td width="846">
				    	<div class="swfupload-control">
							<div id="swfObjDiv"></div><input type="button" value="上传" style="float: left;width: 61px;"/>
						</div>
				        <div class="ui-uploader" id="ui-uploader-1">
				            <ul class="ui-uploader-thumbImages ui-uploader-sortable">
				            </ul>
				        </div>
				        <input id="input_upload_image" type="hidden" name="images" value=""/>
				    </td>
				</tr>
				<tr class="self_service_area" style="display:none">
				    <td colspan="2">
				        <div class="dot_line"></div>
				        <input type="hidden"  id="sticky" name="sticky" value="0" />
				    </td>
				</tr>
				<tr>
					<th><span class="star">*</span>联系电话</th>
					<td width="846">
					<input type="text" class="input-style" name="phone" value="" size="20" maxlength="13"/>
					</td>
				</tr>
				<tr>
					<th><span class="star"></span>联系人</th>
					<td width="846">
					 <input type="text" class="input-style" name="person" value="" size="20"/>
					</td>
				</tr>
				<tr height="50" id="showcode" style = "display:none">
					<th> <span class="star">*</span>验证码</th>
					<td><input class="input-style" name="checkcode" value="" maxlength="4"/><div style="display:inline" id="checkcode"></div></td>
				</tr>
				<tr class="js_self_service_item" style="display: none;">
				    <td colspan="2">
				        <div class="dot_line"></div>
				    </td>
				</tr>
				<tr class="js_self_service_item" style="display: none;">
				    <td colspan="2" id="js_self_service_tips">
				    </td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td id="submiting" width="846">
						<input class="btn-style2" id="btn-style2" name="" type="submit" value="立即发布 >>" />
						<input name="pinyin" id="id_pinyin" type="hidden" value="" />
				        <input name="times" id="times" type="hidden" value="0" />
					</td>
				</tr>
			</table>
		</form>
	</div>
<%--正文结束--%>

</body>
</html>